<!--
 * @Author: lixudong 1164391645@qq.com
 * @Date: 2025-04-03 16:13:48
 * @LastEditors: lixudong 1164391645@qq.com
 * @LastEditTime: 2025-04-07 08:47:10
 * @FilePath: \clear-system-ruoyi\src\views\index.vue
 * @Description: 首页
-->
<template>
  <div class="home">
    <div class="home-bg home-zjfw">
      <div class="home-recently">最近访问</div>
      <div class="home-route">
        <div v-for="(item, index) in recentRoutes" :key="index" class="home-route-item">
          <el-link :underline="false" @click="goToRoute(item.path)">{{ item.meta.title }}</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecentRoutes } from '@/utils/storage'

export default {
  data() {
    return {
      recentRoutes: []
    }
  },
  created() {
    // localStorage.clear()
  },
  mounted() {
    this.recentRoutes = getRecentRoutes() // 组件创建时从localStorage加载路由
    console.log(this.recentRoutes)
    // this.recentRoutes = this.recentRoutes.filter(item => !item.path.includes('/effectPicMaintain/effectPicViews'))
    // this.recentRoutes = this.recentRoutes.filter(item => !item.path.includes('/production/effectPicView'))
  },
  methods: {
    goToRoute(path) {
      this.$router.push({
        path: path
      })
    }
  }
}
</script>

<style lang="scss">
.home {
  // width: 100%;
  // height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Microsoft YaHei';
  padding: 20px;

  .home-bg {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px rgb(0 0 0 / 6%), 0 1px 4px rgb(0 0 0 / 8%);
  }

  .home-zjfw {
    width: 100%;
    height: 100px;
    // height: 77vh;
    margin-bottom: 20px;
  }

  .home-recently {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .home-route {
    display: flex;
    // flex-direction: column;
    .home-route-item {
      font-size: 20px;
      margin-right: 10px;
    }
  }
}
</style>
